<template>
  <a-card class="ax_sticky_top">
    <template #title>
      <h3 class="text-14">字典数据</h3>
    </template>

    <a-flex class="mb-12" :gap="12" wrap="wrap">
      <div>
        <a-input
          @press-enter="dataList"
          v-model:value="dataTable.query.dictType"
          style="width: 160px"
          placeholder="请输入字典标签"
          allow-clear
          disabled
        ></a-input>
      </div>
    </a-flex>

    <a-flex justify="space-between" :align="'center'">
      <a-flex justify="space-between" :align="'center'">
        <a-flex :align="'center'" :gap="4">
          <div v-perm="'system:data:add'">
            <a-tooltip title="新建">
              <a-button type="primary" @click="dataCreate">
                <PlusOutlined />
              </a-button>
            </a-tooltip>
          </div>

          <div v-perm="'system:data:edit'">
            <a-tooltip title="编辑">
              <a-button type="link" @click="dataEdit()" :disabled="dataTable.keys.length !== 1">
                <EditOutlined />
              </a-button>
            </a-tooltip>
          </div>

          <a-tooltip title="刷新">
            <a-button type="link" @click="dataList">
              <ReloadOutlined />
            </a-button>
          </a-tooltip>
        </a-flex>
      </a-flex>
      <a-flex>
        <div v-perm="'system:data:remove'">
          <a-popconfirm
            title="确定要删除吗"
            :disabled="dataTable.keys.length === 0"
            placement="bottomRight"
            @confirm="dataDelete()"
          >
            <a-tooltip title="批量删除">
              <a-button danger type="link" :disabled="dataTable.keys.length === 0">
                <DeleteOutlined />
              </a-button>
            </a-tooltip>
          </a-popconfirm>
        </div>

        <FieldVue
          :raw="dataRawColumns"
          :columns="dataColumns"
          :module-name="dataTable.moduleName"
        />
      </a-flex>
    </a-flex>
  </a-card>
</template>

<script setup lang="ts">
import FieldVue from '@/views/components/table/Field.vue';
import { type DeleteOutlined, type ReloadOutlined } from '@ant-design/icons-vue';
import { dataColumns, dataRawColumns } from '../../data/column';
import { dataCreate, dataDelete, dataEdit, dataList } from '../../data/curd';
import { dataTable } from '../../data/table';
</script>

<style lang="scss" scoped></style>
